<template>
	<view>
		<navBar title="搜索结果"></navBar>
		<!-- 瀑布流 -->
		<u-waterfall v-model="list" class="waterfall" ref="water" v-if="list.length">
			<template v-slot:left="{leftList}">
				<view class="itemList" v-for="(item, index) in leftList" :key="index" @click="checkDetail(item.id)">
					<image :src="item.cover" mode="widthFix"></image>
					<view>{{item.title}}</view>
					<view>{{item.userName}}</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="itemList" v-for="(item, index) in rightList" :key="index" @click="checkDetail(item.id)" >
					<image :src="item.cover" mode="widthFix"></image>
					<view>{{item.title}}</view>
					<view>{{item.userName}}</view>
				</view>
			</template>
		</u-waterfall>
			<u-empty
			        mode="list"
			        icon="http://cdn.uviewui.com/uview/empty/list.png"
					v-else
					class="empty"
			>
			</u-empty>
	</view>
</template>

<script>
	import {
		getKeyword
	} from '@/config/api.js'

	export default {
		data() {
			return {
				list: []
			};
		},
		//onLoad中的option为object类型，会序列化上个页面传递的参数
		async onLoad(options) {
			const keys = await getKeyword(options.keyword)
			this.list = keys.data
			// console.log(this.list);	
		},
			methods:{
				// 点击跳转详情页
				checkDetail(ID){
					uni.navigateTo({
						url:'/subpages/detail/detail?id='+ ID
						})
				}
			}
	}
</script>

<style lang="scss" scoped>
	.waterfall {
		padding: 15px 10px;

		.itemList {
			width: 95%;
			margin: 0 auto;
			margin-bottom: 12px;
			padding: 10px;
			border: 0.5px solid #d0d0d0;
			border-radius: 8px;
			box-sizing: border-box;
			box-shadow: #d9d3ce 0 3px 8px;
			background-color: #fff;

			image {
				width: 100%;
				border-radius: 8px;
			}
		}
	}
	.empty {
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%) scale(1.3);
	}
</style>
